<!--分区域-->
<template>
  <div class="budgetRelease">
    <div class="operation">
      <el-form :inline="true" :model="form" label-width="80px" class="formList">
        <el-form-item label="选择区域">
          <dx-cascader  :area_id.sync="form.areaId" />
        </el-form-item>
        <el-form-item label="年度">
          <el-date-picker v-model="form.year" value-format="yyyy" type="year" placeholder="选择年"></el-date-picker>
        </el-form-item>
        <el-form-item style="width: 27%;" >
          <el-button size="small" type="primary" @click="submitHandle()">查询</el-button>
          <el-button size="small" type="orange" @click="allExportModal()">批量导出</el-button>
          <el-button size="small" type="orange" @click="exportModal()">导出</el-button>
        </el-form-item>
        <el-form-item class="annual">
          <template>
            <div class="title">筛选条件：</div>
            <div class="border">
              <!-- <div><span class="paddRig">跟踪指标：</span>
               <el-checkbox-group v-model="trackingArr"  @change="trackingClick">
                  <el-checkbox v-for="(item,index) in trackType"  :label="item" :key="index" >{{item.indexName}}</el-checkbox>
               </el-checkbox-group>
               </div> -->
              <div><span class="paddRig">跟踪维度：</span>

                <el-radio-group v-model="form.radio" @change='checedRadio'>
                  <el-radio :label="1">全部明细</el-radio>
                  <el-radio :label="2">只看进度</el-radio>
                </el-radio-group>
              </div>
            </div>
          </template>
        </el-form-item>

      </el-form>
    </div>
    <p class="g-unit">单位: 万元</p>
    <div v-show="form.radio==1">
      <div class="tableBox" >
        <el-table
          v-loading="tableLoading"
          :data="tableData"
          height="85vh"
          style="width: 100%"
          class="tableTh28"
          border
          stripe
          ref="table"
          :span-method="arraySpanMethod"
        >
          <el-table-column label="" prop="productName" class-name="first-title" width="100" fixed></el-table-column>
          <el-table-column label="" prop="class1Name" class-name="second-title" width="100" fixed></el-table-column>
          <el-table-column v-for="(item,index) in colDefList" :key="index" :label="item">
            <el-table-column width="100" label="目标值" :prop="'targetValue'+(index)"></el-table-column>
            <el-table-column width="100" label="实际完成" :prop="'actValue'+(index)"></el-table-column>
            <el-table-column label="完成进度(%)" :prop="'process'+(index)"></el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 只看进度 -->
    <div v-show="form.radio==2">
      <div class="tableBox" >
        <el-table
          v-loading="tableLoading"
          :data="tableData1"
          height="85vh"
          style="width: 100%"
          class="tableTh28"
          border
          stripe
          ref="table2"
          :span-method="arraySpanMethod"
        >
          <el-table-column label="" prop="productName" class-name="first-title" width="100" fixed></el-table-column>
          <el-table-column label="" prop="class1Name" class-name="second-title" width="100" fixed></el-table-column>

          <el-table-column v-for="(item,index) in colDefList1" :key="index" :label="item" :prop="'process'+(index)"> </el-table-column>

        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  import { $budgetAPI } from "@/api";
  import prefixAPI from "@/api/prefixAPI"
  import { getSessionStorage } from "@/common/js/storage";
  import { mergeTableRow, mergeSpan } from "@/utils/mixin";
  import {getCookie} from "@/common/js/cookie"
  let accountInfo = JSON.parse(getSessionStorage('accountInfo'))

  export default {
    name: "fenqy",
    props:{
      areaList:{
        type:Array,
        default:()=>([])
      }
    },
    data() {
      return {
        form: {
          areaId: accountInfo.areaId,
          year: '',
          dimension:1,
          radio:1,
        },
        accountInfo: "",
        checkList: [],
        indexType:3,
        trackType:[],
        trackingList:[],
        trackingArr:[],
        checked:[],
        indexTypeStr:[],
        trackMonthStr:[],
        colDefList:[],
        colDefList1:[],
        tableData:[],
        tableData1:[],

        spanArr:[],
        tableLoading: false,
      };
    },
    mounted(){
      this.getParams();
    },
    methods: {
      async getParams(){
        this.form.year = await this.getMaxMonthByTrackType();
        this.submitHandle();
      },

      //获取年份
      getMaxMonthByTrackType(){
        var that = this
        return new Promise(resolve => {
          $budgetAPI.getMaxMonthByTrackTypeAuto(
            {
              indexType:this.indexType,
              areaId : this.form.areaId ? this.form.areaId:this.accountInfo.areaId,
            },
            res => {
              if (res && res.code == 0) {
                that.form.year = res.content;

                resolve (res.content)
              }
            },
            err => {}
          );
        });
      },

      //获取跟踪维度
      checedRadio(val){
        this.form.radio = val
        this.submitHandle()
      },
      //table合并行
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if(this.tableData.length>0 || this.tableData1.length>0){
          if (columnIndex == 0 || columnIndex == 1 ) {

            return this.spanArr[rowIndex][columnIndex];

          }
        }

      },
      //点击查询
      async  submitHandle() {
        let params ={
          areaId : this.form.areaId ? this.form.areaId:this.accountInfo.areaId,
          testYear : this.form.year,
          indexType:3
        }
        this.getData(params);
      },
      getData(params) {
        if(this.form.radio == 1){
          this.tableLoading = true;
          var that=this
          $budgetAPI.getReleaseTrackDataAuto(params,res => {
            if (res.code === 0) {
              that.tableLoading = false
              that.colDefList = res.content.areaNames
              res.content.data.map((item,index)=>{
                item.dataList.map((ele,ind) => {
                  item['targetValue'+ind] = ele.targetValue
                  item['actValue'+ind] = ele.actValue
                  item['process'+ind] = ele.process
                })
              });
              that.tableData = res.content.data;
              this.spanArr = mergeSpan( that.tableData, [
                "productName",
                "class1Name",
              ]);
            } else {
              this.alertError(res);
            }
            setTimeout(()=>{
              this.$refs.table.doLayout();

            },500);

          });
        }else{
          this.tableLoading = true;
          var that=this
          $budgetAPI.getReleaseTrackDataAuto(params,res => {
            if (res.code === 0) {
              that.tableLoading = false
              that.colDefList1= res.content.areaNames
              res.content.data.map((item,index)=>{
                item.dataList.map((ele,ind) => {
                  item['process'+ind] = ele.process
                })
              });
              that.tableData1 = res.content.data;
              this.spanArr = mergeSpan( that.tableData1, [
                "productName",
                "class1Name",
              ]);

            } else {
              this.alertError(res);
            }
            setTimeout(()=>{
              this.$refs.table2.doLayout();

            },500);
          });

        }
      },
      //批量导出
      allExportModal() {
        let areaId = this.form.areaId;
        let testYear = this.form.year;
        // let indexTypeStr = JSON.stringify(this.trackingArr);
        // let trackMonthStr = JSON.stringify(this.trackMonthStr);
        let indexType=3;
        let token = getCookie('token');
        // 根据不同模式切换不同的路径
        if(this.form.radio == 1){
          let isShowDetail=true;
          // 根据不同模式切换不同的路径
          if (process.env.NODE_ENV == "development") {
            window.location.href =
              prefixAPI.loc +
              `/api/releaseTrackAuto/exportBatchReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
          } else if (process.env.NODE_ENV == "production") {
            window.location.href =
              prefixAPI.hp +
              `/api/releaseTrackAuto/exportBatchReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
          }
        }else{
          let isShowDetail=false;
          // 根据不同模式切换不同的路径
          if (process.env.NODE_ENV == "development") {
            window.location.href =
              prefixAPI.loc +
              `/api/releaseTrackAuto/exportBatchReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
          } else if (process.env.NODE_ENV == "production") {
            window.location.href =
              prefixAPI.hp +
              `/api/releaseTrackAuto/exportBatchReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
          }
        }
      },
      //导出
      exportModal() {
        let areaId = this.form.areaId;
        let testYear = this.form.year;
        // let indexTypeStr = JSON.stringify(this.trackingArr);
        // let trackMonthStr = JSON.stringify(this.trackMonthStr);
        let indexType=3;
        let token = getCookie('token');
        // 根据不同模式切换不同的路径
        if(this.form.radio == 1){
          let isShowDetail=true;
          // 根据不同模式切换不同的路径
          if (process.env.NODE_ENV == "development") {
            window.location.href =
              prefixAPI.loc +
              `/api/releaseTrackAuto/exportReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
          } else if (process.env.NODE_ENV == "production") {
            window.location.href =
              prefixAPI.hp +
              `/api/releaseTrackAuto/exportReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
          }
        }else{
          let isShowDetail=false;
          // 根据不同模式切换不同的路径
          if (process.env.NODE_ENV == "development") {
            window.location.href =
              prefixAPI.loc +
              `/api/releaseTrackAuto/exportReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
          } else if (process.env.NODE_ENV == "production") {
            window.location.href =
              prefixAPI.hp +
              `/api/releaseTrackAuto/exportReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
          }
        }
      },

    }
  };
</script>
<style lang="scss" scoped>
</style>
<style lang="scss">
  .budgetRelease {
    .tableBox {
      .first-title.is-leaf {
        position: relative;
        border-right: 1px solid #d7e5fb !important;
        .cell {
          color: #d7e5fb;
        }
      }

      .second-title.is-leaf {
        overflow: visible;
        .cell {
          transform: translateX(-60%);
        }
      }

    }

    .operation {
      .annual {
        width: 100%;
        padding-left: 20px;
        .el-form-item__content{
          width: 100%;
        }
        .title{font-size: 18px;}
        .paddRig{
          padding-right: 25px;
        }
        .border{
          border: 1px solid #DCDFE6;
          padding: 0 20px;
          margin-bottom: 10px;
          .el-checkbox-group{
            display: inline-block;
          }
        }
      }
      .btnForm{
        float: right;
        .el-form-item__content{
          float: right;
          width: 100%;
          .export{
            float:right;
          }
        }
      }
    }
  }
</style>
